import React from "react";
import "./CourseCate.scss";
// import { InfoCircleOutlined, UserOutlined } from "@ant-design/icons";
import { Input, Search } from "antd";
import { useEffect, useState } from "react";
import {
  get_cate_detail,
  get_video_detail,
  get_cate_theme,
  get_cate_search,
} from "../../utils/api";
import CourseItem from "../CourseItem/CourseItem";
function CourseCate() {
  const [fieldsData, setFieldsData] = useState();
  const [subjectsData, setSubjectsData] = useState();
  const [toolsData, setToolsData] = useState();
  const [levelData, setLevelData] = useState();
  // 用于传递参数
  const [type, setType] = useState(2);
  const [page, setPage] = useState(1);
  const [field, setField] = useState();
  const [subjects, setSubjects] = useState([]);
  const [tools, setTools] = useState([]);
  const [level, setLevel] = useState();
  const { Search } = Input;
  // 保存分类页面，搜索框输入的值
  const [title, setTitle] = useState();
  // const tools_ref = useRef();
  // 用于展示active
  // 保存课程详情数据
  const [videoData, setVideoData] = useState();
  // const type_ref = useRef();

  useEffect(() => {
    async function getCates() {
      let data = await get_cate_detail();
      videoDetail(type, page, field, subjects, tools, level, title);
      console.log("获取分类详情信息数据", data);
      setFieldsData(data.course_fields);
      setSubjectsData(data.course_subjects);
      setToolsData(data.course_tools);
      setLevelData(data.level);
    }
    getCates();
  }, []);
  const videoDetail = async (
    type,
    page,
    field,
    subjects,
    tools,
    level,
    title
  ) => {
    let { data: videoList } = await get_video_detail(
      type,
      page,
      field,
      subjects,
      tools,
      level,
      title
    );
    setVideoData(videoList);
  };
  // 主题内容点击事件
  const themeEvent = (subId) => {
    if (subId === 6666) {
      subjects.splice(0);
    } else {
      const idx = subjects.indexOf(subId);
      console.log(idx);
      if (idx === -1) subjects.push(subId);
      else subjects.splice(idx, 1);
    }
    console.log("subjects", subjects);
    videoDetail(type, page, field, subjects, tools, level, title);
  };
  // 领域内容点击事件
  const fieldEvent = async (id) => {
    let {
      course_category_pertains: { subjects: sub },
    } = await get_cate_theme(id);
    console.log("sub", sub);
    setSubjectsData(sub);
    setField(id);
    videoDetail(type, page, id, subjects, tools, level, title);
  };

  let newArr = [];
  // 获取工具的点击事件
  const toolsEvent = (id) => {
    if (id === 6666) {
      tools.splice(0);
    } else {
      const idx = tools.indexOf(id);
      console.log(idx);
      if (idx === -1) tools.push(id);
      else tools.splice(idx, 1);
    }

    console.log("tools", tools);
    videoDetail(type, page, field, subjects, tools, level, title);
  };

  // 难度内容点击事件
  const levelEvent = (value) => {
    console.log("value", value);
    setLevel(value);
    videoDetail(type, page, field, subjects, tools, value, title);
  };

  // console.log("fieldsData", fieldsData);
  // 排序内容点击事件
  const sortEvent = (num) => {
    // console.log("num", num);
    setType(num);
    videoDetail(num, page, field, subjects, tools, level, title);
  };
  // console.log("type", type);

  // 鼠标回车时触发
  const pressEvent = async (e) => {
    console.log("e", e.target.value);
    setTitle(e.target.value);
    videoDetail(type, page, field, subjects, tools, level, e.target.value);
  };

  // 点击搜索事件
  const onSearch = async (value) => {
    videoDetail(type, page, field, subjects, tools, level, value);
  };
  return (
    <div className="CourseCate">
      <div className="coursecate_search">
        <Search
          placeholder="input search text"
          onPressEnter={pressEvent}
          onSearch={onSearch}
        />
      </div>
      <div className="theme">
        <h3 className="title">主题</h3>
        <div className="name">
          <p
            className={subjects.length === 0 ? "active" : ""}
            onClick={() => themeEvent(6666)}
          >
            全部
          </p>
          {subjectsData &&
            subjectsData.map((item) => (
              <p
                className={subjects.indexOf(item.id) !== -1 ? "active" : ""}
                onClick={() => themeEvent(item.id)}
                key={item.id}
              >
                {item.name}
              </p>
            ))}
        </div>
      </div>
      <div className="field">
        <h3>领域</h3>
        <div className="fields_item">
          <span className={field ? "" : "active"}>全部</span>
          {fieldsData &&
            fieldsData.map((item) => (
              <span
                key={item.id}
                onClick={() => fieldEvent(item.id)}
                className={field === item.id ? "active" : ""}
              >
                {item.name}
              </span>
            ))}
        </div>
      </div>
      <div className="tools">
        <h3>工具</h3>
        <div className="tools_item">
          <span
            onClick={() => toolsEvent(6666)}
            className={tools.length === 0 ? "active" : ""}
          >
            全部
          </span>
          {toolsData &&
            toolsData.map((item) => (
              <span
                className={tools.indexOf(item.id) !== -1 ? "active" : ""}
                onClick={() => toolsEvent(item.id)}
                key={item.id}
              >
                {item.name}
              </span>
            ))}
        </div>
      </div>
      <div className="level">
        <h3>难度</h3>
        <div className="level_item">
          <span className={level ? "" : "active"}>全部</span>
          {levelData &&
            levelData.map((item) => (
              <span
                className={level === item.value ? "active" : ""}
                key={item.value}
                onClick={() => levelEvent(item.value)}
              >
                {item.level_name}
              </span>
            ))}
        </div>
      </div>
      <div className="sort">
        <h3>排序</h3>
        <div className="sort_item">
          <span
            onClick={() => sortEvent(2)}
            className={type === 2 ? "active" : ""}
          >
            综合
          </span>
          <span
            onClick={() => sortEvent(1)}
            className={type === 1 ? "active" : ""}
          >
            最新
          </span>
          <span
            onClick={() => sortEvent(3)}
            className={type === 3 ? "active" : ""}
          >
            最热
          </span>
        </div>
        <div className="action">筛选</div>
      </div>
      <div className="course_cate_con">
        {videoData &&
          videoData.map((item) => (
            <CourseItem item={item} key={item.id}></CourseItem>
          ))}
      </div>
    </div>
  );
}
export default CourseCate;
